<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
    html, body {
    height: 100%;
}
    	.flex-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
		.flex-vertical {
    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
    flex-flow: column;
}.flex-con {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}#wrap, .body-wrap {
		    height: 100%;
		}
        .rs_save_btn {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            font-size: 0.75rem;
            border-radius: 5px;
            margin-top: 0.5rem;
        }
        .showadr {    padding: 4rem 1rem 0rem 1rem;}
        .adr_tips {font-size: 0.65rem;}
        .map_adr {color:#85c226; line-height: 1rem;height:2rem; overflow: hidden;}
        #menpai {border-bottom: #ddd 1px solid;}

        #adrmap {position: relative;}
        .marker_wrap { -webkit-box-align:center; -webkit-align-items:center; align-items:center; height: 100%;}
        .marker {position: relative;
            width: 16px; height:16px; background: url('../../image/marker.png') no-repeat center;
        }
        .marker2 {position: absolute; top:50%; left:50%;margin-left:-11.5px;margin-top:-12.5px;
            width: 23px; height:25px;
        }.aui-bar-nav{background:#85c226;}
    </style>
</head>
<body>
<div class="body-wrap flex-wrap flex-vertical">
	<header class="aui-bar aui-bar-nav top-nav" id="title">
		<a class="aui-pull-left aui-btn" onclick="api.closeWin();">
	        <span class="aui-iconfont aui-icon-left"></span>
	    </a>
		<div class="aui-title" id="db_title">地址定位</div>
	</header>
    <div class="showadr">
        <div class="adr_tips">拖动地图, 变更坐标地址</div>
        <div class="map_adr" id="map_adr">地图坐标位置</div>
        <div class="rs_save_btn aui-btn-warning" tapmode="tapmodehover" onclick="saveadr();">确定</div>
    </div>
    <div class="flex-con" id="adrmap">
        <div class="marker2" id="map_marker"></div>
    </div>

</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">

var myParam = {},bMap,lon,lat,adrmap, showadr,menpai, isadd=false;
//var lon=112.454571,lat=34.656392; //洛阳
apiready = function() {
    //$api.fixIos7Bar(header);
    adrmap = document.getElementById("adrmap");
    showadr = document.getElementById("map_adr");
    menpai = document.getElementById("menpai");
    myParam = api.pageParam;
    bMap = api.require("bMap");

    api.showProgress();

	if (myParam.myadr.lon && myParam.myadr.lat && myParam.myadr.content) {
        //编辑地址
        isadd = false;
        showadr.innerHTML = myParam.myadr.content;

        var retl = {lon: myParam.myadr.lon, lat: myParam.myadr.lat};
        openmap(retl);
    }else {
        //新加地址
        isadd = true;
        bMap.getLocation({
            accuracy: '10m',
            autoStop: true,
            filter: 1
            }, function(retl, errl){
                if(retl.status){
                    openmap(retl);
                }else{
                    api.hideProgress();
                    alert(errl.msg);
                }
            }
        );
    }
}

function openmap(retl) {
    lon = retl.lon;
    lat = retl.lat;
    bMap.open({
        rect : {x: 0, y: adrmap.offsetTop, w:api.winWidth, h: adrmap.offsetHeight},
        center: {lon:lon, lat:lat},
        zoomLevel : 18,
        showUserLocation : false,
//      fixedOn: api.frameName,
//      fixed: false
    },function(reto,erro){
    	//alert(JSON.stringify(reto));
        if( ! reto.status){
            //api.hideProgress();
            api.toast({msg: "百度地图加载失败", location: 'top'});
            return;
        }
        //打开图层
        openAnn();

        //setAnn(lon,lat); //地图添加标注
        if (isadd) transAdr(lon, lat); //翻译地址

        //监听地图
        bMap.addEventListener({
            name: 'viewChange'
        }, function(ret) {
            if (ret.status && ret.lon!=lon && ret.lat!=lat) {
                //判断中心点变更
                lon = ret.lon;
                lat = ret.lat;
                //setAnn(lon,lat); //地图标注
                transAdr(lon, lat); //显示地址
            }
        });

        //显示用户位置
        //bMap.showUserLocation({isShow:true,trackingMode:'none'});
    });

    bMap.show();
    api.hideProgress();
}

function openAnn() {
    var markerdom = document.querySelector("#map_marker");

    api.openFrame({
        name: 'marker_frm',
        url: '../frame/marker.html',
        rect: {x:markerdom.offsetLeft , y: markerdom.offsetTop+adrmap.offsetTop, w: markerdom.offsetWidth, h:markerdom.offsetHeight},
        bounces: false,
        showProgress: false,
        reload: false,
        vScrollBarEnabled: false,
        hScrollBarEnabled: false,
        scaleEnabled: false,
        bgColor : 'rgba(0,0,0,0)'
    });
}

function transAdr(nowlon,nowlat) {
    bMap.getNameFromCoords({lon: nowlon, lat: nowlat},function(ret,err){
        if(ret.status){
            //$api.html(showadr, ret.address);
            try {
                $api.html(showadr, ret.city + ret.district + ret.poiList[0].name);
            }catch(e) {
                $api.html(showadr, ret.city + ret.district);
            }
            paramCity = ret.city;
//          lon = ret.poiList[0].coord.lon;
//          lat = ret.poiList[0].coord.lat;
        }else {
            if(err.code == 1){
              alert('检索词有岐义');
            }else if(err.code == 2){
              alert('检索地址有岐义');
            }else if(err.code == 3){
              alert('没有找到检索结果');
            }else if(err.code == 4){
              alert('key错误');
            }else if(err.code == 5){
              alert('网络连接错误');
            }else if(err.code == 6){
              alert('网络连接超时');
            }else{
              alert('还未完成鉴权，请在鉴权通过后重试');
            }
        }
    })
}

function setAnn(nowlon, nowlat) {
    bMap.annotationExist({
        id: 1
    }, function(ret) {
        if (ret.status) {
            //存在
            bMap.setAnnotationCoords({
                id: 1, lon: nowlon, lat: nowlat
            });
        }else {
            //不存在
            bMap.addAnnotations({
                annotations: [{
                    id: 1, lon: nowlon, lat: nowlat
                }],
                draggable: false
            });
        }
    });
}

function saveadr() {
    /*
    var menpai_str = $api.html($api.byId('menpai'));
    if (menpai_str == '') {
        api.toast({msg: "请填写具体的门牌号", location: 'top'});
        return;
    }
    var param_obj = {
        lon: lon,
        lat: lat,
        content: $api.html(showadr) + menpai_str
    }
    */
    var adrstr = showadr.innerHTML;
    api.closeWin();
    //发送保存地址事件
    api.sendEvent({
        name: 'adr_save',
        extra: {lon: lon, lat: lat, adrstr: adrstr}
    });
}

</script>
